<script setup lang="ts">
import { ref } from "vue";
import MainMenu from "@/components/main-menu/main-menu.vue";
import MainHeader from "@/components/main-header/main-header.vue";
import { useisFoldStore } from "@/stores/main/main";  

// pinia里引入的是否折叠的状态
let isFold = useisFoldStore();

</script>

<template>
  <div class="main">
    <el-container class="main_container">
      <el-aside :width="isFold.isFinite ? '64px':'210px'">
        <MainMenu />
      </el-aside>
      <el-container>
        <el-header>
          <MainHeader />
        </el-header>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<style scoped lang="less">
.main {
  width: 100%;
  height: 100%;

  .main_container {
    height: 100%;

    .el-aside {
      // 取消滚动条
      overflow: hidden;
      // 隐藏滚动条
      // -ms-overflow-style: none;
      // scrollbar-width: none;
      // 添加过度效果 width 表示宽度
      transition: width 0.3s;
    }

    .el-header {
      padding: 0;
    }
  }
}
</style>
